<template>
	<view>
		<cu-custom :bgColor="'bg-'+theme" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">限时抢购</block>
		</cu-custom>

		<scroll-view scroll-x class=" nav" :class="'bg-'+theme" scroll-with-animation :scroll-left="scrollLeft" v-if="discount">
			<view class="cu-item heightauto" v-for="(item,index) in discount" :key="index" @tap="tabSelect" :data-id="index">
				<view class="discount-view text-center">
					<view class="" :class="index==TabCur?'cu-tag bg-white round sm':'text-white text-sm'">{{$common.timeFormat(item.start_time, 'h:m')}}</view>
					<view class="text-white text-xs margin-xs">
						{{item.start_time|showStartDay}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="discount && discount.length == 0" class="empty text-gray text-center text-lg">
			暂无抢购活动
		</view>
		<view class="cu-list" v-for="(item, index) in listObj.list" :key="index">
			<discountProductView :value="item"></discountProductView>
		</view>
		<view class="cu-load margin-center" :class="listObj.loading?'loading':'over'"></view>
	</view>
</template>

<script>
	import discountProductView from '@/components/shop/marketing/discountProductView.vue'
	export default {
		components: {
			discountProductView
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				discount: null,
				listObj: {
					id: 0,
					list: [],
					page: 1,
					hasMore: true,
					loading: false
				},
				theme: this.$config.THEME(),
			};
		},
		filters: {
			showStartDay(value) {
				var date = new Date(value * 1000)
				var now = new Date()
				if (date < now) {
					return '已开始'
				} else if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() == now.getDate()) {
					return '今天'
				} else {
					var year = date.getFullYear()
					var mouth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
					var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
					return year + '-' + mouth + '-' + day
				}

			}
		},
		onLoad() {
			this.$nextTick(function() {
				uni.startPullDownRefresh({})
			})
		},
		onShow() {
			this.theme = this.$config.THEME()
		},
		methods: {
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = e.currentTarget.dataset.id
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					this.listObj = {
						id: this.discount[this.TabCur].id,
						list: [],
						page: 1,
						hasMore: true,
						loading: false
					}
					this.getProduct()
				}
			},
			getIndex() {
				this.$http
					.get('marketing_discount_index')
					.then((response) => {
						this.discount = response.data.data
						uni.stopPullDownRefresh()
						if (this.discount.length > 0) {
							this.listObj.id = this.discount[0].id
							this.getProduct(this.TabCur)
						}
					})
					.catch((response) => {
						uni.hideLoading()
					})
			},
			getProduct() {
				let id = this.listObj.id
				if (this.listObj.hasMore && !this.listObj.loading) {
					this.listObj.loading = true
					this.$http
						.get('marketing_discount_product', {
							id: id,
							page: this.listObj.page
						})
						.then((response) => {
							let list = this.listObj.list
							if (response.data.data.length > 0) {
								if (list.length > 0)
									list = list.concat(response.data.data)
								else list = response.data.data
								this.listObj.list = list
							} else {
								this.listObj.hasMore = false
							}
							this.listObj.page += 1
							this.listObj.loading = false
						})
						.catch((response) => {
							this.listObj.loading = true
						})
				}
			}
		},
		onPullDownRefresh() {
			this.getIndex()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/marketing/discount'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-限时抢购',
				imageUrl: '',
				path: path
			}
		},
	}
</script>

<style>
	.heightauto {
		height: auto;
	}

	.discount-view {
		line-height: 30rpx;
	}

	.empty {
		padding: 100rpx;
	}
</style>
